<template>
    <el-dialog title="添加禁停道路" :visible.sync="visible"
                :before-close="handleClose" center >
      <el-form ref="formParam" :model="formParam"
               style='width: 400px; margin-left:50px;'
               label-position="left" label-width="100px" :rules="rules">
        <el-form-item label="道路名称" prop="park_name">
          <el-input v-model="formParam.park_name" @click.native="parkVisible = !parkVisible"
                    placeholder="道路名称"></el-input>
        </el-form-item>
        <el-form-item label="起始位置" prop="chargeRoad_no">
          <el-input v-model="formParam.chargeRoad_no" clearable placeholder="起始位置"></el-input>
        </el-form-item>
        <el-form-item label="终止位置" prop="chargeRoad_name">
          <el-input v-model="formParam.chargeRoad_name" clearable placeholder="终止位置"></el-input>
        </el-form-item>
        <el-form-item label="禁停期始" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name" clearable placeholder="禁停期始"></el-input>
        </el-form-item>
        <el-form-item label="禁停位置" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name2" clearable placeholder="禁停位置"></el-input>
        </el-form-item>
        <el-form-item label="行政区划" prop="roadStatus">
          <el-select v-model="formParam.roadStatus" placeholder="行政区划">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addChargeUnit('formParam')" class="btn-search" type="primary">添加
        </el-button>
        <el-button class="btn-search" type="danger"
                   @click="resetForm('formParam')" >重置
        </el-button>
      </div>
      <person-child-dialog-dw :dialogDwVisible.sync="dwVisible"
                              @dwName5="selectDwname"
                              :dwType="dwType"
                              :dwLoading.sync="dwLoading">
      </person-child-dialog-dw>
    </el-dialog>
</template>

<script>
  import PersonChildDialogDw from '../../organizationManagement/personChild/personChildDialogDw'
  import ParkingDialog from '../../operatingManagement/parkingflowChild/parkingDialog'
  import ElDialog from 'element-ui/packages/dialog/src/component'

  export default {
    components: {
      ElDialog,
      PersonChildDialogDw,
      ParkingDialog
    },
    name: 'charge-unit-add',
    data() {
      var reg = /^[0-9a-zA-Z]+$/
      var checkNumAndCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入收费路段编号'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入字母、数字'))
        } else {
          callback()
        }
      }
      return {
        parkVisible: false,
        visible: false,

        berthVisible: false,
        dwVisible: false,
        dwType: 4,
        dwLoading: true,
        formParam: {
          park_name: '',
          park_no: '',
          chargeRoad_no: '',
          chargeRoad_name: '',
          roadStatus: '1',
          chargeUnit_no: '',
          chargeUnit_name: '',
          unit_places: ''
        },
        // 获取row的key值
        getRowKeys(row) {
          return row.place_id
        },
        selectedData: [],
        selectRows: 0,
        berth: {
          total: 0,
          berthLoading: true,
          berthList: []
        },
        berthQuery: {
          page: 1,
          limit: 10
        },
        options: [{
          value: '1',
          label: '济南市历下区'
        }, {
          value: '2',
          label: '济南市槐荫区'
        }, {
          value: '3',
          label: '济南市天桥区'
        }, {
          value: '4',
          label: '济南市市中区'
        }, {
          value: '5',
          label: '济南市章丘区'
        }, {
          value: '6',
          label: '济南市历城区'
        }, {
          value: '7',
          label: '济南市平阴县'
        }],
        rules: {
          park_name: [
            { required: true, message: '请输入道路名称', trigger: 'blur' }
          ],
          chargeRoad_no: [
            { validator: checkNumAndCode, required: true, trigger: 'blur' }
          ],
          chargeRoad_name: [
            { required: true, message: '请输入收费路段名称', trigger: 'blur' }
          ],
          roadStatus: [
            { required: true, message: '请选择路段状态', trigger: 'change' }
          ]
        }
      }
    },
    watch: {
      addChargeVisible(val) {
        this.visible = val
        this.clearFormParam() // 打开清空表单
      },
      visible(val) {
        this.$emit('update:addChargeVisible', val)
      }
    },
    props: [
      'addChargeVisible'
    ],

    methods: {
      /* 关闭弹框之前操作*/
      handleClose(done) {
        this.visible = false
      },
      handleBerthClose(done) {
        this.berthVisible = false
        this.berthQuery.page = 1
        this.berthQuery.limit = 10
      },
      /* 清空添加页面表单*/
      clearFormParam() {
        this.formParam.park_no = ''
        this.formParam.park_name = ''
        this.formParam.chargeRoad_no = ''
        this.formParam.chargeRoad_name = ''
        this.formParam.roadStatus = '1'
        this.formParam.chargeUnit_no = ''
        this.formParam.chargeUnit_name = ''
        this.formParam.unit_places = ''
      },
      /* 双击选择停车场*/
      selectParkName(val) {
        this.formParam.park_name = val.parkname
        this.formParam.park_no = val.parkno
      },
      /* 根据停车场查询泊位信息*/
      selectPlaceByPark() {
        if (this.formParam.park_name === '' || this.formParam.park_no === '') {
          this.addError()
          return
        }
        this.berthVisible = true
      },
      /* 点击泊位编号时操作*/
      berthClickRows(rows, row) {
        let flag = 0
        for (const i in rows) {
          if (row.place_id === rows[i].place_id) {
            flag = 1
            break
          }
        }
        if (flag === 1) {
          if (row.place_chargeunit !== null && row.place_chargeunit !== '') {
            this.$confirm('此泊位已被其他收费路段占用, 是否继续?', '提示', {
              confirmButtonText: '继续',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$refs.multipleTable.toggleRowSelection(row, true)
              this.selectedData.push(row.place_id)
            }).catch(() => {
              this.$refs.multipleTable.toggleRowSelection(row, false)
            })
          } else {
            this.selectedData.push(row.place_id)
          }
        } else {
          for (const i in this.selectedData) {
            if (this.selectedData[i] === row.place_id) {
              this.selectedData.splice(i, 1)
            }
          }
        }
        this.selectRows = rows.length
        console.log(this.selectedData)
      },
      selectAll(rows) {
        var v = this
        // remove
        console.log('前一次数量：' + this.selectRows)
        console.log('数量：' + rows.length)
        if (rows.length <= this.selectRows) {
          for (const i in v.berth.berthList) {
            for (const j in v.selectedData) {
              if (v.selectedData[j] === v.berth.berthList[i].place_id) {
                v.selectedData.splice(j, 1)
                break
              }
            }
          }
        } else {
          for (const i in v.berth.berthList) {
            let flag = false
            for (const j in v.selectedData) {
              if (v.selectedData[j] === v.berth.berthList[i].place_id) {
                flag = true
                break
              }
            }
            if (!flag) {
              if (v.berth.berthList[i].place_chargeunit !== null && v.berth.berthList[i].place_chargeunit !== '') {
                this.$message.warning('某些泊位被其他收费路段占用，请检查确认')
                v.selectedData.push(v.berth.berthList[i].place_id)
              } else {
                v.selectedData.push(v.berth.berthList[i].place_id)
              }
            }
          }
        }
        this.selectRows = rows.length
      },
      openDwDialog() {
        this.dwVisible = true
      },
      selectDwname(val) {
        this.formParam.chargeUnit_no = val.orgno
        this.formParam.chargeUnit_name = val.orgname
      },
      /* 添加收费路段按钮*/
      addChargeUnit(formParam) {
        this.$refs[formParam].validate((valid) => {
          if (valid) {
            if (this.selectedData.length !== 0) {
              this.selectedData.forEach((value, index) => {
                if (index !== 0) {
                  this.formParam.unit_places += ','
                }
                this.formParam.unit_places += value
              })
            }
            this.addSuccess()
            this.visible = false
            this.formParam.unit_places = ''
            this.$emit('addAfterQueryChargeUnit')
          } else {
            return false
          }
        })
      },
      /* 关闭泊位选择按钮*/
      clearSelectBerth() {
        this.selectedData = []
        this.$refs.multipleTable.clearSelection()
        this.berthVisible = false
      },
      /* 泊位分页操作*/
      berthHandlerCurrentChange(num) {
        this.berthQuery.page = num
        this.selectPlaceByPark()
      },
      berthHandlerSizeChange(num) {
        this.berthQuery.limit = num
        this.selectPlaceByPark()
      },
      resetForm(formParam) {
        this.$refs[formParam].resetFields()
      },
      /* 提示信息*/
      addError() {
        this.$message.error('请选择停车场')
      },
      addSuccess() {
        this.$message.success('添加成功')
      }
    }
  }
</script>

<style scoped>

</style>

